import { StatusBar } from 'expo-status-bar';
import { 
    StyleSheet, 
    Text, 
    View, 
    Image,
    ImageBackground,
    ScrollView,
    Button,
    TouchableOpacity
} from 'react-native';

// const T = ({children,style})=>{
//     return <Text style={style}>{children}</Text>
// }
const T = ({children,...rest})=>{
    return <Text {...rest}>{children}</Text>
}
const ImageBG = ({style,source,children})=>{
    return <View style={style}>
        <Image 
            source={source}
            style={[style,{position: 'absolute'}]}
        />
        {children}
    </View>

}

export default function App() {
    const uri = 'https://facebook.github.io/react-native/img/tiny_logo.png'
    return (
        <View style={styles.layout}>
            <ScrollView>
                <Button
                    onPress={()=>{}}
                    title="按钮"
                    color="#841584"
                />
                <TouchableOpacity
                    style={{
                        width: 200,height: 50,
                        backgroundColor: '#0ff',
                        alignItems: 'center',
                        justifyContent: 'center',
                        borderRadius: 25
                    }}
                >
                    <Text style={{color: '#fff'}}>按钮</Text>
                </TouchableOpacity>
                {/* <B>fdfd</B> */}
                <T style={{color: '#f00'}}>
                    hello
                    <T style={{color: '#0f0'}}>第二次作业还没写完</T>
                    <T>那还有心思写代码</T>
                </T>
                <Image 
                    style={{
                        width: 200,
                        height: 100,
                        resizeMode: 'cover'
                    }}
                    source={require('./assets/icon.png')}
                />
                <Image
                    style={{width: 200, height: 100}}
                    source={{
                        uri
                    }}
                />
                <ImageBackground
                    style={{width: 200, height: 200}}
                    source={require('./assets/icon.png')}
                >
                    <Text>背景图组件</Text>
                </ImageBackground>
                <ImageBG
                    style={{width: 200, height: 200}}
                    source={require('./assets/icon.png')}
                >
                    <Text>自定义背景图组件</Text>
                    <Text>自定义背景图组件</Text>
                </ImageBG>
                <ImageBG
                    style={{width: 200, height: 200}}
                    source={require('./assets/icon.png')}
                >
                    <Text>自定义背景图组件</Text>
                    <Text>自定义背景图组件</Text>
                </ImageBG>
            </ScrollView>
        </View>
    );
}

const styles = StyleSheet.create({
    layout: {
        flex: 1,
        backgroundColor: '#ccc'
    },
});
